<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>约Fun!</title>
    <!--    网页格式清除-->
    <link href="../CSS/首页/empty.css" rel="stylesheet">

    <!--    导航栏的style  ul-top和li-top-->
    <link href="../CSS/首页/导航栏.css" rel="stylesheet">

    <!--搜索框-->
    <link href="../CSS/首页/搜索框.css" rel="stylesheet">

    <!--轮播图-->
    <link href="../CSS/首页/轮播图.css" rel="stylesheet" >
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>

    <!--    分区展示-->
    <link href="../CSS/首页/分区.css" rel="stylesheet" >
</head>
<body background="../images/菜单/餐厅图/5.jpeg">
<!--导航栏-->
<ul class="ul-top">
    <li class="li-top"><a  href="#home">欢迎光临，约Fun!</a></li>
    <li class="li-top"><a  href="1主页.html">首页</a></li>
<!--    <li class="li-top"><a  href="#home">菜单</a></li>-->
<!--    <li class="li-top"><a  href="#home">专题</a></li>-->
    <li class="li-top" style="float:right">
        <a id="login_info" href="3登录.html">登录</a>
        <a id="login_user" href="7个人信息.html" style="display: none;">有户名</a>
    </li>
    <li class="li-top" style="float:right"><a href="#about">收藏</a></li>
    <li class="li-top" style="float:right"><a href="5我的Fun桌.html">我的Fun桌</a></li>
</ul>
    <!--搜索栏-->
    <div id="d1">
    <!--    图标-->
    <div id="logo">

    </div>
    <!--    搜索框-->
    <div id="search">
        <!-- autocomplete="off" 确保表单已关闭自动填充功能： -->
        <form autocomplete="off" action="/index.php">
            <div class="autocomplete" style="width:300px;">
                <input id="myInput" type="text" name="s" placeholder="今天吃什么？">
            </div>
            <input type="submit" value="确定">
        </form>
        <script>
            var loginUser= localStorage.getItem("userInfo");
            console.log("登录成功后的信息：",loginUser)
            if (loginUser != null && loginUser != "" && typeof(loginUser) != "undefined"){
                var username = JSON.parse(loginUser).username;
                document.getElementById("login_info").setAttribute("style","display: none;")
                document.getElementById("login_user").setAttribute("style","display: block;")
                document.getElementById("login_user").innerText = username;
            }

            var sites = ["西红柿炒鸡蛋","青椒肉丝","糖醋排骨","Wiki","Zhihu","Baidu","Sina","Tmall","JD","Alibaba","QQ","Weixin","R","Rust","Python","Ruby"];
            function autocomplete(inp, arr) {
                /*自动填充函数有两个参数，input 输入框元素和自动填充的数组*/
                var currentFocus;
                /* 监听 input 输入框，当在 input 输入框元素中时执行以下函数*/
                inp.addEventListener("input", function(e) {
                    var a, b, i, val = this.value;
                    /*关闭已打开的自动填充列表*/
                    closeAllLists();
                    if (!val) { return false;}
                    currentFocus = -1;
                    /*创建 DIV 元素用于放置自动填充列表的值*/
                    a = document.createElement("DIV");
                    a.setAttribute("id", this.id + "autocomplete-list");
                    a.setAttribute("class", "autocomplete-items");
                    /*DIV 作为自动填充容器的子元素*/
                    this.parentNode.appendChild(a);
                    /*循环数组*/
                    for (i = 0; i < arr.length; i++) {
                        /*检查填充项是否有与文本字段值相同的内容，不区分大小写*/
                        if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
                            /*为每个匹配元素创建一个 DIV 元素 */
                            b = document.createElement("DIV");
                            /*匹配项加粗*/
                            b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
                            b.innerHTML += arr[i].substr(val.length);
                            /*选中的填充项插入到隐藏 input 输入字段，用于保存当前选中值*/
                            b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
                            /*当有人点击填充项（DIV 元素）时执行函数*/
                            b.addEventListener("click", function(e) {
                                /*选中的填充项插入到隐藏 input 搜索字段*/
                                inp.value = this.getElementsByTagName("input")[0].value;
                                /*关闭自动填充列表*/
                                closeAllLists();
                            });
                            a.appendChild(b);
                        }
                    }
                });
                /*按下键盘上的一个键时执行函数*/
                inp.addEventListener("keydown", function(e) {
                    var x = document.getElementById(this.id + "autocomplete-list");
                    if (x) x = x.getElementsByTagName("div");
                    if (e.keyCode == 40) {
                        /*如果按下箭头向下键，currentFocus 变量加 1，即向下移动一位*/
                        currentFocus++;
                        /*使当前选中项更醒目*/
                        addActive(x);
                    } else if (e.keyCode == 38) { //up
                        /*按下箭头向上键，选中列表项向上移动一位*/
                        currentFocus--;
                        /*使当前选中项更醒目*/
                        addActive(x);
                    } else if (e.keyCode == 13) {
                        /*如果按下 ENTER 键，阻止提交，你也可以设置 submit 提交*/
                        e.preventDefault();
                        if (currentFocus > -1) {
                            /*模拟点击选中项*/
                            if (x) x[currentFocus].click();
                        }
                    }
                });
                function addActive(x) {
                    /*设置选中的选项函数*/
                    if (!x) return false;
                    /*移动选项设置不同选中选项的背景颜色*/
                    removeActive(x);
                    if (currentFocus >= x.length) currentFocus = 0;
                    if (currentFocus < 0) currentFocus = (x.length - 1);
                    /*添加 "autocomplete-active" 类*/
                    x[currentFocus].classList.add("autocomplete-active");
                }
                function removeActive(x) {
                    /*移除没有选中选项的 "autocomplete-active" 类*/
                    for (var i = 0; i < x.length; i++) {
                        x[i].classList.remove("autocomplete-active");
                    }
                }
                function closeAllLists(elmnt) {
                    /*关闭自动添加列表*/
                    var x = document.getElementsByClassName("autocomplete-items");
                    for (var i = 0; i < x.length; i++) {
                        if (elmnt != x[i] && elmnt != inp) {
                            x[i].parentNode.removeChild(x[i]);
                        }
                    }
                }
                /*点击 HTML 文档任意位置关闭填充列表*/
                document.addEventListener("click", function (e) {
                    closeAllLists(e.target);
                });
            }
            autocomplete(document.getElementById("myInput"), sites);
        </script>
    </div>
    </div>
    <!-- 轮播 -->
    <div id="d2" class="arousel slide" data-bs-ride="carousel">
    <!-- 指示符 -->
    <div class="carousel-indicators">
        <button type="button" data-bs-target="#d2" data-bs-slide-to="0" class="active"></button>
        <button type="button" data-bs-target="#d2" data-bs-slide-to="1"></button>
        <button type="button" data-bs-target="#d2" data-bs-slide-to="2"></button>
    </div>
    <!-- 轮播图片 -->
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="../images/主页/主页轮播1.jpg" class="d-block" style="width:80%;height:450px;margin: auto">
        </div>
        <div class="carousel-item">
            <img src="../images/主页/主页轮播2.jpg" class="d-block" style="width:80%;height:450px;margin: auto">
        </div>
        <div class="carousel-item">
            <img src="../images/主页/主页轮播3.jpg" class="d-block" style="width:80%;height:450px;margin: auto">
        </div>
    </div>
    <!-- 左右切换按钮 -->
    <button class="carousel-control-prev" type="button" data-bs-target="#d2" data-bs-slide="prev" >
        <span class="carousel-control-prev-icon"></span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#d2" data-bs-slide="next">
        <span class="carousel-control-next-icon"></span>
    </button>
</div>
    <!--分区展示-->
    <div id="d4">
    <!--    关于我们-->
    <div class="d4all" id="d4-1">
        <!--        背景-->
        <div class="d4back" id="d4b-1" >

        </div>
        <!--文字-->
        <div >
            <p style="position: relative;top: -350px;left: 30px;font-size: 40px">
                <a class="d4t" href="4菜单.html">菜单</a>
                <hr  style=" position: relative;
                     top: -360px;
                     width: 70%;
                     height: 3px;
                     color: white;
                     opacity:100%;">
            </p>
            <p style="position: relative;top: -360px;left: 50px;font-size: 20px">
                今天想吃什么？
            </p>
        </div>
    </div>
    <!--    菜单-->
    <div class="d4all" id="d4-2">
        <!--        背景-->
        <div class="d4back" id="d4b-2">

        </div>

        <!--文字-->
        <div >
            <p style="position: relative;top: -350px;left: 30px;font-size: 40px">
                <a class="d4t" href="6关于我们.html">关于我们</a>
            <hr  style=" position: relative;
                     top: -360px;
                     width: 70%;
                     height: 3px;
                     color: white;
                     opacity:100%;">
            </p>
            <p style="position: relative;top: -360px;left: 50px;font-size: 20px">
                欢迎订餐
            </p>
        </div>
    </div>
</div>

</div>
</body>
</html>